<template>
  <div class="posTmodule">
    <el-row>
      <!-- 左侧 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <Recommend @getData="cityData" /></div
      ></el-col>
      <!-- 右侧 -->
      <el-col :span="18">
        <div class="grid-content bg-purple-light">
          <Strategy :data="list" @cityData="cityData" /></div
      ></el-col>
    </el-row>
    <!-- 分页 -->
    <div class="dis">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[2, 6, 9, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1, // 当前页
      pageSize: 2, // 当前页的条数
      dataList: [], // 请求回来的数据
      total: 0,
      list: [], // 分页筛选出来的数据
      start: 0,
      limit: 3,
    };
  },

  mounted() {
    this.$router.push({
      path: `/post?start=${this.start}&limit=${this.limit}`,
    });
    this.getData();
  },
  methods: {
    // 子组件传递过来的数据
    cityData(data) {
      // 每一次点击的时候页码都是从第一页开始的
      this.pageIndex = 1;
      this.dataList = data.data;
      this.total = data.total;
      // 计算分页的处理 bigin 当前的位置  0-9 10-19 20-29  30-39
      const bigin = (this.pageIndex - 1) * this.pageSize;
      const end = bigin + this.pageSize;
      this.list = this.dataList.slice(bigin, end);
    },
    // 获取文章总数据的封装
    getData() {
      this.$axios({
        url: "posts",
      }).then((res) => {
        console.log(res);
        this.dataList = res.data.data;
        this.total = res.data.total;
        this.getList();
      });
    },
    // 封装页码的计算
    getList() {
      // 分页的处理 把之前要传递给子组件的数据 使用slice从开始到结束的位置传给子组件渲染
      /**
       * 步骤
       * 1 先添加分页的框架
       * 2 定义pageIndex 设置当前页   pageSine 当前页的条数
       * 3 定义一个新的数组 分页筛选后的数据 把之前请求回来的数据赋值给筛选后的
       * 4 传给子组件
       * 5 分页的计算方式
       *  开始的位置：用当前的页码减1(2-1) * 当前的页码条数（5）
       *  结束的位置 用当前的位置加上 条数
       * 6 把当前点击的页码赋值给在data 中定义的页码 点击每条页数的时候就重新调用一次计算页码的方式
       * 7 把当前点击的条数赋值个在data 中定义的条数 点击当前页的时候也重新计算一次页码的方式
       */
      // 0-9   10-19 20-19 30-39 40-49   bigin 就是开始的位置 end 是结束位置
      const end = this.pageIndex * this.pageSize;
      // 用当前结束的位置 减去每页的条数就可以计算出 开始的位置
      const bigin = end - this.pageSize;
      this.list = this.dataList.slice(bigin, end);
    },
    // 点击每条页数是触发
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新计算分页的数据
      this.getList();
    },

    // 点击当前页码是触发
    handleCurrentChange(val) {
      // 重新计算分页的数据
      this.pageIndex = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.posTmodule {
  width: 1000px;
  margin: 20px auto;
  .bg-purple {
    margin-right: 20px;
  }
}
.dis {
  margin: 20px 0 0 240px;
}
</style>